<template>
  <div class="playlist-container scroll-container">
    <!-- 歌单头部 -->
    <div class="header">
      <img
        :src="playList.image"
        class="left-image" />
      <div class="right">
        <p class="title">{{ playList.name }}</p>
        <div class="creator">
          <el-image :src="playList.creator.avatarUrl" />
          <span class="creator-name">{{ playList.creator.nickname }}</span>
          <div class="tag">
            <span
              v-for="item in playList.tag"
              :key="item"
              >#{{ item }}</span
            >
          </div>
        </div>

        <p class="description">
          {{ playList.description }}
        </p>
        <div class="operation">
          <PlayButton :songs="playListSong" />
          <DecoratedButton
            name="收藏"
            icon="&#xe761;" />
        </div>
      </div>
    </div>
    <!-- 歌单主题 -->
    <Tab
      active="song"
      class="playlist-tab"
      @getActive="getActive">
      <template #content>
        <el-tab-pane
          :label="`歌曲 ${playListSong.length}`"
          name="song">
          <SongList
            :songs="playListSong"
            :isPlaylist="true" />
        </el-tab-pane>
        <el-tab-pane
          :label="`评论 ${Math.floor(+playList.playCount % 1000)}`"
          name="comment">
          <NoSearch />
        </el-tab-pane>
      </template>
    </Tab>
  </div>
</template>

<script lang="ts" setup>
import { reactive, Ref, inject } from 'vue';
import { useRoute } from 'vue-router';
import {
  elMessage,
  getMusicUrls,
  getMusicInfos,
  getTheme,
} from '../utils/util';
import { elMessageType } from '../model/enum';
import { getPlayListDetail, getPlayListSong } from '../api/api';
import { Playlist, Song } from '../model';
import SongList from '../components/SongList.vue';
import PlayButton from '../components/PlayButton.vue';
import DecoratedButton from '../components/DecoratedButton.vue';
import NoSearch from '../components/NoSearch.vue';
import Tab from '../components/Tab.vue';

//设置主题
const color = getTheme().get('fontColor');
const colorBlack = getTheme().get('fontBlack');
const boxShadow = getTheme().get('shadow');
//路由参数
const route = useRoute();
const id = route.query.id;

//歌单详情
const playList = reactive<Playlist>({
  id: id + '',
  name: '',
  image: '',
  playCount: '',
  tag: [],
  description: '',
  creator: {
    nickname: '',
    avatarUrl: '',
  },
});

//歌单歌曲
const playListSong = reactive<Song[]>([]);

//页面进入时的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
//设置隐藏滚动条
const hideScroll = inject('hideScroll') as Function;

//活得当前活跃的tab项
const getActive = () => {
  hideScroll();
};

//获取歌单详情
getPlayListDetail(playList.id)
  .then((response: any) => {
    const {
      playlist: { name, coverImgUrl, description, tags, creator, playCount },
    } = response;
    playList.name = name;
    playList.image = coverImgUrl;
    playList.description = description;
    playList.tag = tags;
    playList.creator.avatarUrl = creator.avatarUrl;
    playList.creator.nickname = creator.nickname;
    playList.playCount = playCount;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });

//获取歌单的音乐
getPlayListSong(id + '')
  .then((response: any) => {
    const { songs } = response;
    const ids: string[] = [];
    songs.forEach((item: any) => {
      //获取音乐的基本信息
      getMusicInfos(ids, playListSong, item);
    });
    //获取音乐的url
    getMusicUrls(ids.join(','), playListSong);
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-light-black: v-bind(colorBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.playlist-container {
  .header {
    width: 80vw;
    display: flex;
    .left-image {
      width: 168px;
      height: 168px;
      border-radius: 10px;
      box-shadow: @shadow;
      margin-right: 20px;
      object-fit: cover;
    }
    .right {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 25px;
        font-weight: bold;
        color: @font-color-light-black;
        letter-spacing: 1px;
        margin-left: 2px;
      }

      .creator {
        margin: 12px 0 10px 0;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: @font-color-gray;
        .el-image {
          width: 30px;
          height: 30px;
          object-fit: cover;
          border-radius: 50%;
          box-shadow: @shadow;
        }
        span {
          display: inline-block;
          margin: 0 5px;
        }
        .creator-name {
          margin: 0 40px 0 10px;
        }
      }
      .description {
        font-size: 12px;
        color: @font-color-gray;
        text-indent: 0.5em;
        height: 33px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .operation {
        margin-top: 10px;
        .more {
          margin-left: 10px;
          border: none;
          outline: none;
          height: 34px;
          width: 34px;
          text-align: center;
          line-height: 34px;
          border-radius: 18px;
          background-color: #e1e1e1;
          color: @font-color-light-black;
          &:active {
            background-color: rgba(225, 225, 225, 0.8);
            border: none;
          }
          &:hover {
            background-color: rgba(225, 225, 225, 0.8);
          }
        }
      }
    }
  }

  .playlist-tab {
    &:deep(.el-tabs__item) {
      font-size: 13px;
      letter-spacing: 0;
    }
    &:deep(.el-tabs__active-bar) {
      left: 14px;
    }
  }
}
</style>
